<template>
<div>
  <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
  <div id="myChart1" :style="{width: '100%', height: '300px'}"></div>
  <div id="myChart2" :style="{width: '100%', height: '300px'}"></div>
</div>


</template>

<script>

export default {
  name: 'SystemDataView',
  data () {
    return {
      users:[],
      lectures:[],
      reverse:[],

    }
  },
  mounted(){

    this.getEchartData();
    this.drawLine();
     this.drawLine1();

  },
  methods: {
    getEchartData() {
      this.getRequest('/system/visualdata/usersData7').then(resp=>{
        if (resp)
        {
          this.users=resp;

          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('myChart'));

          // 指定图表的配置项和数据
          var option = {
            title: { text: '用户的数量变化' },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [this.users[0], this.users[1], this.users[2], this.users[3], this.users[4], this.users[5], this.users[6]],
                type: 'line'
              }
            ]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      })

    },
    drawLine(){
      this.getRequest('/system/visualdata/lecturesData7').then(resp=>{
        if (resp)
        {
          this.lectures=resp;
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart1'))
          // 绘制图表
          var option={
            title: { text: '讲座数量变化' },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [this.lectures[0], this.lectures[1], this.lectures[2], this.lectures[3], this.lectures[4], this.lectures[5], this.lectures[6]],
                type: 'line'
              }
            ]
          };
          myChart.setOption(option);
        }
      })
    },

    drawLine1(){
      this.getRequest('/system/visualdata/reverseData7').then(resp=>{
        if (resp)
        {
          this.reverse=resp;
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart2'))
          // 绘制图表
          var option={
            title: { text: '讲座预定数量变化' },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [this.reverse[0], this.reverse[1], this.reverse[2], this.reverse[3], this.reverse[4], this.reverse[5], this.reverse[6]],
                type: 'line'
              }
            ]
          };
          myChart.setOption(option);

        }
      })
    },








  }
}
</script>